<template>
  <div class="main-spot">
    <div class="part thumb">
      <div class="top-img" :style="{ height: imgHeight }">
        <img v-lazy="dataSource?.img" />
      </div>
      <div class="bottom">
        <div class="bottom-first overOne">
          {{ dataSource?.title }}
        </div>

        <div class="bottom-four">
          <div class="bottom-four-left overOne">￥{{ twoFixed( dataSource?.price ) }}</div>
          <div class="bottom-four-right overOne">{{ !dataSource?.pay_num ? 0 : payNumEscape(dataSource?.pay_num)}}人付款</div>
        </div>

        <div class="bottom-five">
          <div class="bottom-five-left overOne">
            <div class="store-icon">
              <img v-lazy="publicUrl(`/images/store-icon.png`)" />
            </div>
            <div class="text overOne">{{ dataSource?.company_name }}</div>
          </div>
          <div class="bottom-five-right overOne">{{dataSource?.city}}{{ dataSource?.area }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl, twoFixed,payNumEscape } from "@/utils/util";
import { GoodsData } from "./interface";
interface Porps {
  imgHeight?: string;           //图片高度
  dataSource?: GoodsData;       //商品数据
}
withDefaults(defineProps<Porps>(), {
  imgHeight: "1.5552rem",
  dataSource:undefined
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
